<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="filter-card">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateChange"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总用户数</span>
            </div>
          </template>
          <div class="card-value">{{ stats.totalUsers }}</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>总模拟次数</span>
            </div>
          </template>
          <div class="card-value">{{ stats.totalSimulations }}</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>成功率</span>
            </div>
          </template>
          <div class="card-value">{{ successRate }}%</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>活跃设备数</span>
            </div>
          </template>
          <div class="card-value">{{ stats.deviceStats.length }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>注册趋势</span>
            </div>
          </template>
          <div ref="registrationChart" class="chart"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>成功/失败分布</span>
            </div>
          </template>
          <div ref="successFailureChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>设备使用统计</span>
            </div>
          </template>
          <div ref="deviceChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'Dashboard',
  setup() {
    const store = useStore()
    const dateRange = ref<[Date, Date] | null>(null)
    const registrationChart = ref<HTMLElement>()
    const successFailureChart = ref<HTMLElement>()
    const deviceChart = ref<HTMLElement>()
    
    const stats = computed(() => store.state.dashboard.stats)
    const successRate = computed(() => {
      if (!stats.value.totalSimulations) return 0
      return ((stats.value.successCount / stats.value.totalSimulations) * 100).toFixed(1)
    })
    
    const initCharts = () => {
      if (registrationChart.value) {
        const chart = echarts.init(registrationChart.value)
        chart.setOption({
          title: { text: '注册趋势' },
          tooltip: { trigger: 'axis' },
          xAxis: {
            type: 'category',
            data: stats.value.registrationTrend.map(item => item._id)
          },
          yAxis: { type: 'value' },
          series: [{
            data: stats.value.registrationTrend.map(item => item.count),
            type: 'line',
            smooth: true
          }]
        })
      }
      
      if (successFailureChart.value) {
        const chart = echarts.init(successFailureChart.value)
        chart.setOption({
          title: { text: '成功/失败分布' },
          tooltip: { trigger: 'item' },
          series: [{
            type: 'pie',
            radius: '50%',
            data: [
              { value: stats.value.successCount, name: '成功' },
              { value: stats.value.failureCount, name: '失败' }
            ]
          }]
        })
      }
      
      if (deviceChart.value) {
        const chart = echarts.init(deviceChart.value)
        chart.setOption({
          title: { text: '设备使用统计' },
          tooltip: { trigger: 'axis' },
          xAxis: {
            type: 'category',
            data: stats.value.deviceStats.map(item => item._id)
          },
          yAxis: { type: 'value' },
          series: [{
            data: stats.value.deviceStats.map(item => item.count),
            type: 'bar'
          }]
        })
      }
    }
    
    const handleDateChange = () => {
      store.dispatch('dashboard/fetchStats', {
        startDate: dateRange.value?.[0],
        endDate: dateRange.value?.[1]
      })
    }
    
    onMounted(() => {
      store.dispatch('dashboard/fetchStats')
      initCharts()
    })
    
    return {
      dateRange,
      stats,
      successRate,
      registrationChart,
      successFailureChart,
      deviceChart,
      handleDateChange
    }
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  .filter-card {
    margin-bottom: 20px;
  }
  
  .data-overview {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-value {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
    }
  }
  
  .chart-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart {
        height: 300px;
      }
    }
  }
}
</style> 